<template>
  <v-app id="login" class="primary">
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4 lg4>
            <v-card class="elevation-1 pa-3">
              <v-card-text>
                <div class="layout column align-center">
                  <v-avatar size="128" color="grey lighten-4">
                    <img
                      src="https://cdn.vuetifyjs.com/images/logos/v-alt.svg"
                      alt="Vue Material Admin"
                    >
                  </v-avatar>
                  <h1 class="flex my-4 primary--text">LABLOG ADMIN</h1>
                </div>
                <v-form>
                  <v-text-field
                    append-icon="email"
                    name="email"
                    label="邮箱"
                    type="text"
                    data-vv-name="email"
                    v-validate="'required|email'"
                    v-model="model.username"
                    :error-messages="errors.collect('email')"
                  ></v-text-field>
                  <v-text-field
                    append-icon="lock"
                    name="password"
                    label="密码"
                    id="password"
                    type="password"
                    v-model="model.password"
                  ></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-btn icon>
                  <v-icon color="dark">fab fa-github</v-icon>
                </v-btn>
                <v-btn icon>
                  <v-icon color="red">fab fa-weibo</v-icon>
                </v-btn>
                <v-btn icon>
                  <v-icon color="light-blue">fab fa-qq</v-icon>
                </v-btn>
                <v-spacer></v-spacer>
                <v-btn block color="primary" @click="login" :loading="loading">Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  $_veeValidate: {
    validator: 'new'
  },
  data: () => ({
    loading: false,
    model: {
      username: 'admin@admin.com',
      password: '123456'
    }
  }),
  methods: {
    login() {
      this.loading = true
      setTimeout(() => {
        this.$validator.validateAll()
      }, 1000)
    }
  },
  mounted() {
    this.$validator.localize('en', this.dictionary)
  }
}
</script>
<style scoped lang="css">
#login {
  height: 50%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  z-index: 0;
}
</style>
